<template>
	<view>
		<view class="box">
			<view class="menu_content_box">
				<view class="pl15 pr15 pb15">
					<view class="mt20 area_block_1">

						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">故障名称</view>
								<view class="item tar"><input v-model="title" type="text" class="ipt_01"
										placeholder="请输入故障名称" placeholder-style="color:#B2B2B2;"></view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="vh ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">设备类型</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChange" :value="index" :range="types"
											range-key="name">
											<text class="fs28"
												:class="{ cor_B2B : ColorOne }">{{types[index].name}}</text>
										</picker>
									</view>
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">设备品牌</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChangeTwo" :value="indexTwo" :range="brands"
											range-key="name">
											<text class="fs28"
												:class="{ cor_B2B : ColorTwo }">{{brands[indexTwo].name}}</text>
										</picker>
									</view>
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>

						<!-- 		<view class="pl20 pr25 scaley_1">
							<view class="</image> >
								<view class="w185 fs30 cor_000">设备吨位</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChangeThree" :value="indexThree" :range="qTypes">
											<text class="fs28"
												:class="{ cor_B2B : ColorThree }">{{qTypes[indexThree]}}</text>
										</picker>
									</view>
								</view>
								<image src="/static/icon_arrow_4.png" class="ml20 img15"></image> 							</view>
						</view> -->

						<view class="pl20 pr25 scaley_1">
							<view class="flex_box aic">
								<view class=" w185 fs30 cor_000">故障类型</view>
								<view class="item">
									<view class="sel_area_sty">
										<picker class="" @change="bindPickerChangeFour" :value="indexFour"
											:range="qTypes" range-key="name">
											<text class="fs28"
												:class="{ cor_B2B : ColorFour }">{{qTypes[indexFour].name}}</text>
										</picker>
									</view>
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15"></image>
							</view>
						</view>

						<view class="pl20 pr25">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">联系电话</view>
								<view class=" item tar"><input type="text" class="ipt_01" placeholder="请输入联系电话"
										v-model="phone" placeholder-style="color:#B2B2B2;"></view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15 vh"></image>
							</view>
						</view>

						<view class="pl20 pr25">
							<view class="flex_box aic">
								<view class="w185 fs30 cor_000">当前位置</view>
								<view class="item tar"><input @tap="chooseL" @focus="chooseL" type="text" class="ipt_01"
										placeholder="请选择当前位置" v-model="address" placeholder-style="color:#B2B2B2;">
								</view>
								<image :lazy-load="true" src="/static/icon_arrow_4.png" class="ml20 img15 vh"></image>
							</view>
						</view>

					</view>

					<view class="mt20 pt35 pl20 pr20 pb30 area_block_1">
						<view class="fs30 cor_000">故障描述</view>
						<view class="mt20 textarea_area_line">
							<textarea class="textarea_01" @input="introduceChange" @blur="introduceConfirm"
								@confirm="introduceConfirm" placeholder="描述您设备的具体故障，方便工程师携带维修工具！" v-model="introduce"
								placeholder-style="color: #B2B2B2"></textarea>
							<view class="mt15 fs22 cor_B2B"><text>{{intro_lenght}}</text>/150字</view>
						</view>
					</view>

					<!-- <view class="mt20 pt35 pl20 pr20 pb30 area_block_1">
						<view class="fs30 cor_000">故障图片</view>
						<view class="mt35 df fw">
							<image src="/static/banner_2.png" class="mr17 mb10 img16"></image> 							<i<imagec="/static/banner_2.png" class="mr17 mb10 img16"></image> 							<ima<image"/static/icon_file_img.png" class="mb10 img16"></image> 						</view>
					</view> -->
					<view class="mt20 pt35 pl20 pr20 pb30 area_block_1">
						<view class="fs30 cor_000">故障图片</view>
						<view class="mt35 df fw">
							<view class="re img16 mr15 mb25" v-for="item, index in localfiles" :key="index">
								<image :lazy-load="true" class="mr17 mb10 img16" :src="item"
									style="border: 1px solid silver;border-radius: 20rpx;">
								</image>

								<image :lazy-load="true" src="../../static/del.png"
									style="width: 40rpx;height: 40rpx;position: absolute;right: -12rpx;top:-24rpx;"
									@tap="delImg(index)"></image>
							</view>

							<image :lazy-load="true" @tap="uploadFile" src="/static/icon_file_img.png" class="mb10 img16"></image>
						</view>
					</view>

				</view>
			</view>
			<!-- 下单-按钮 -->

			<view class="consult_immediately_btn" @tap="addRepairPage">下单</view>
			<!-- box -->
		</view>
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getTypeFilterApi,
		addRepairPageApi,
		uploadImgApi
	} from '@/http/api.js';
	import {
		openPosition
	} from '@/http/http.js';

	export default {
		data() {
			return {
				index: 0,
				ColorOne: true,
				indexTwo: 0,
				ColorTwo: true,
				arrayThree: ['请选择设备吨位', '2吨', '2.5吨'],
				indexThree: 0,
				ColorThree: true,
				indexFour: 0,
				ColorFour: true,
				latitude: '',
				longitude: '',
				address: '',
				types: [],
				brands: [],
				qTypes: [],
				title: '',
				typeId: 0,
				brandId: 0,
				dTypeId: 0,
				phone: '',
				introduce: '',
				imgList: [],
				files: [],
				localfiles: [],
				intro_lenght: 0,
			}
		},
		onLoad(options) {
			console.log(options, 'bdasdaasda')
			let that = this;
			if (!uni.getStorageSync('userId')) {
				uni.reLaunch({
					url: '/pages/Sign_in/Sign_in'
				})
			}
			if (!options.latitude || !options.longitude || options.latitude == undefined || options.longitude ==
				undefined) {
				toast('请先选择您的当前位置');
				setTimeout(function() {
					uni.redirectTo({
						url: '/pages/order_repair/order_repair'
					})
				}, 1500)
			} else {
				this.latitude = options.latitude;
				this.longitude = options.longitude;
				this.address = options.latitude + ',' + options.longitude
			}
			that.getTypeFilter();
		},
		onShow() {
			this.getTypeFilter();
		},
		onBackPress(options) {
			uni.redirectTo({
				url: '/pages/index/index'
			})
			return true;
		},
		
		methods: {
			getTypeFilter() {
				let that = this;
				//showLoading('加载中');
				getTypeFilterApi({

				}).then(res => {
					console.log(res.data);
					that.types = res.data.dTypes,
						that.brands = res.data.brands,
						that.qTypes = res.data.types
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},
			bindPickerChange: function(e) { //请选择设备类型
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorOne = false
				} else {
					this.ColorOne = true
				}
				this.index = e.target.value
			},
			bindPickerChangeTwo: function(e) { //请选择设备品牌
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorTwo = false
				} else {
					this.ColorTwo = true
				}
				this.indexTwo = e.target.value
			},
			bindPickerChangeThree: function(e) { //请选择设备吨位
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorThree = false
				} else {
					this.ColorThree = true
				}
				this.indexThree = e.target.value
			},
			bindPickerChangeFour: function(e) { //请选择故障类型
				console.log('picker发送选择改变，携带值为', e.target.value);
				if (e.target.value != 0) {
					this.ColorFour = false
				} else {
					this.ColorFour = true
				}
				this.indexFour = e.target.value
			},
			introduceChange(e) {
				console.log(e.detail.value);
				this.intro_lenght = e.detail.value.length;
				if (this.intro_lenght > 150) {
					toast('工作介绍长度不得超过150个字符');
					return false;
				}
			},
			chooseL: function(e) {
				uni.navigateTo({
					url: '/pages/order_repair/order_repair'
				})
			},

			addRepairPage() {
				let that = this;
				if (!this.title) {
					toast('请填写故障名称');
					return false;
				}
				if (!this.phone) {
					toast('请填写手机号码');
					return false;
				}
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					toast('手机号不合法，请重新输入');
					return false;
				}
				if (!this.longitude || !this.latitude) {
					toast('请选择设备当前所在位置');
					return false;
				}
				if (!this.introduce || this.introduce > 150) {
					toast('故障描述最多150个字符');
					return false;
				}
				if (this.files.length < 1 || this.files.length > 9) {
					toast('请上传1~9张设备图片');
					return false;
				}
				if (this.brandId == 0) {
					this.brandId = this.brands[0].id;
				}
				if (this.dTypeId == 0) {
					this.dTypeId = this.qTypes[0].id;
				}
				if (this.typeId == 0) {
					this.typeId = this.types[0].id;
				}
				showLoading('提交中');
				addRepairPageApi({
					title: this.title,
					phone: this.phone,
					longitude: this.longitude,
					latitude: this.latitude,
					introduce: this.introduce,
					brandId: this.brandId,
					dTypeId: this.dTypeId,
					typeId: this.typeId,
					imgList: JSON.stringify(this.files),
					userId: uni.getStorageSync('userId')
				}).then(res => {
					toast('提交成功!')
					hideLoading();
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 1500)
				}).catch(err => {
					toast(err.msg);
					hideLoading();
				})
			},

			uploadFile() {
				let that = this;
				if (that.files.length >= 9) {
					toast('最多上传9张照片');
				}
				let count = 9 - that.files.length;
				uni.chooseImage({
					count: count,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						for (let i in res.tempFilePaths) {
							if (that.files.length < 9) {
								that.localfiles.push(res.tempFilePaths[i])
								showLoading('上传中');
								uploadImgApi({
									file: res.tempFilePaths[i],
									id: 6
								}).then(res => {
									that.files.push(res.data);
									hideLoading();
								}).catch(err => {
									hideLoading();
								})

							}
						}
					}
				});
				console.log(that.files);
			},


			delImg(index) {
				console.log(index);
				console.log('aaaaaaa');
				let that = this;
				let files = [];
				let localfiles = [];
				for (let i in that.files) {
					if (i != index) {
						files.push(that.files[i]);
					}
				}
				for (let i in that.localfiles) {
					if (i != index) {
						localfiles.push(that.localfiles[i]);
					}
				}
				that.files = files;
				that.localfiles = localfiles;
			},

			//获取当前位置
			getCurLocation() {
				uni.getLocation({
					geocode: true,
					type: 'gcj02',
					success: async (res) => {
						let {
							pois
						} = await posToCity({
								latitude: res.latitude,
								longitude: res.longitude,
							},
							1
						);
						this.address = pois[0].title
						this.latitude = res.latitude
						this.longitude = res.longitude
						uni.setStorageSync('latitude', res.latitude)
						uni.setStorageSync('longitude', res.longitude)
						this.curAddress = store.state.address.curPickAddress.title
					}
				})
			}
		}
	}
</script>

<style>
	.menu_content_box {
		position: relative;
		height: calc(100vh - 98rpx);
		background-color: #f7f6f6;
	}

	.area_block_1 {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.consult_immediately_btn {
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
	}

	.ipt_01 {
		display: inline-block;
		width: 100%;
		height: 94rpx;
		line-height: 94rpx;
		text-align: right;
		padding: 0;
		font-size: 28rpx;
		color: #0A0A0A;
		background-color: transparent;
		border: none;
		border-radius: 0;
		outline: none;
	}

	.sel_area_sty {
		display: inline-block;
		width: 100%;
		height: 94rpx;
		line-height: 94rpx;
		text-align: right;
		font-size: 28rpx;
		color: #0A0A0A;
		background: transparent;
	}

	.textarea_area_line {
		padding: 20rpx;
		border: 1px solid #e7e5e5;
	}

	.textarea_area_line .textarea_01 {
		display: inline-block;
		width: 100%;
		padding: 0rpx;
		height: 245rpx;
		line-height: 40rpx;
		text-align: left;
		padding: 0;
		font-size: 28rpx;
		color: #0A0A0A;
		background-color: transparent;
		border: none;
		border-radius: 0;
		outline: none;
	}
</style>
